<template>
  <div class="audition80">
    <h3>为什么要清除浮动？</h3>
    <p>父盒子没有设置高度时，子盒子不设置浮动，子盒子可以撑开父盒子</p>
    <p>子盒子设置了浮动，脱离了文档流，父盒子无法计算子盒子的高度，<br>
      所以子盒子不能撑开父盒子了，父盒子高度就变成了0,<br>
      此时就需要清除浮动，让子盒子撑开父盒子</p>
    <h3>清除浮动的方法：</h3>
    <p>1. 父盒子设置overflow: hidden;</p>
    <p>2. 在最后一个子盒子后面，添加一个标签，标签样式设置为clear: both;</p>
    <p>这种方式添加了一个无语义的标签，不可取。</p>
    <code class="code">
      .clear {<br />
        <span class="indient">clear: both;</span><br />
      }<br />
      &lt;div class="box"&gt;<br />
        <span class="indient">&lt;div class="box1"&gt;&lt;/div&gt;</span><br />
        <span class="indient">&lt;div class="box2"&gt;&lt;/div&gt;</span><br />
        <span class="indient">&lt;div class="box3"&gt;&lt;/div&gt;</span><br />
        <span class="indient">&lt;div class="<span class="color">clear</span>"&gt;&lt;/div&gt;</span><br />
      &lt;/div&gt;
    </code>
    <p>3. 父元素上使用伪元素清除浮动</p>
    <code class="code">
      .clearfix {<br />
        <span class="indient">*zoom: 1;</span><br />
      }<br />
      .clearfix::after {<br />
        <span class="indient">content: "";</span><br />
        <span class="indient">display: block;</span><br />
        <span class="indient">height: 0;</span><br />
        <span class="indient">clear: both;</span><br />
        <span class="indient">visibility: hidden;</span><br />
      }<br />
      &lt;div class="box <span class="color">clearfix</span>"&gt;<br />
        <span class="indient">&lt;div class="box1"&gt;&lt;/div&gt;</span><br />
        <span class="indient">&lt;div class="box2"&gt;&lt;/div&gt;</span><br />
      &lt;/div&gt;
    </code>
    <p>4. 在父元素上使用双伪元素清除浮动<span class="color">(推荐使用)</span></p>
    <code class="code">
      .clearfix {<br />
        <span class="indient">*zoom: 1;</span><br />
      }<br />
      .clearfix::before,<br /> 
      .clearfix::after {<br />
        <span class="indient">content: "";</span><br />
        <span class="indient">display: table;</span><br />
      }<br />
      .clearfix::after {<br />
        <span class="indient">clear: both;</span><br />
      }<br />
      &lt;div class="box <span class="color">clearfix</span>"&gt;<br />
        <span class="indient">&lt;div class="box1"&gt;&lt;/div&gt;</span><br />
        <span class="indient">&lt;div class="box2"&gt;&lt;/div&gt;</span><br />
      &lt;/div&gt;
    </code>
  </div>
</template>

<script>
export default {
  name: 'Audition80',
}
</script>

<style>

</style>